// 获取本地的商品id
let id = sessionStorage.getItem('goodsId');

// 判断商品id是否存在，否则跳转回列表页
if (!id) {
  layer.msg('非法请求', {
    time: 2000
  });
  setTimeout(() => {
    location.href = './index.html';
  }, 2000);
}
// 根据商品id发起请求，获取到商品数据
// 添加加载层
let index = layer.load(1, {
  shade: .7
})
getGoodsInfo()
async function getGoodsInfo() {
  let {
    data
  } = await pAjax({
    url: '../server/detail.php',
    data: {
      id
    },
    dataType: 'json'
  });
  // 获取商品图片地址
  let imgPaths = data.imgpath.split('==========');
  //console.log(imgPaths);

  // 获取到商品详情数据然后渲染
  $('.displayAreaImg').attr('src', imgPaths);
  $('.enlargedAreaImg').attr('src', imgPaths);
  $('.tableImg>img').attr('src', imgPaths);
  // 遍历imgPaths数组
  let str = '';
  imgPaths.forEach(item => {
    str += `
     <li><img src='${item}' /></li> 
    `
  });
  $('.small ul').html(str);
  document.querySelector('.shopNavLeft>p').innerHTML = data.name + '&nbsp' + '|' + '&nbsp';
  $('.shopNavLeft>a').text(data.introduce);
  // 调用封装好的放大镜函数
  enlarge();
  $('.description>h4').text(data.name);
  $('.souceprice>span').text(data.price);
  $('.news>p').text(data.introduce);
  // 将商品的库存写入input标签的自定义属性中 data-stock
  $('#num').attr('data-stock', data.stock);
  // ajax请求数据
  getList()
  async function getList() {
    // 请求北京的景点数据
    let res = await pAjax({
      url: '../server/scenics.php',
      data: {
        pid: 2
      },
      dataType: 'json'
    })
    let data1 = res.data;
    // 遍历data
    let str = '';
    data1.forEach(item => {
      str += `
            <li>
                <img src="${item.imgpath}" alt="...">
                <br>
                <span>￥${item.price}元</span>
            </li>
       `
    })
    $('.clearfix')[0].innerHTML = str;
  }
  layer.close(index); // 关闭加载层
}

// 购物车
/* 
  1. 必须的登录才能加入购物车
  2. 购物车数据存储在localStorage(字符串，json格式的字符串)
     数据存储的形式: 数组的形式存储购物车信息，数组中多个对象，每个对象就是一个购物车数据
        [
          {
            商品id,购买的数据量,用户名
          }
        ]
    模拟数据:
    [
      {goodsId:1,num:1,username:'admin'},
      {goodsId:2,num:1,username:'admin'},
      {goodsId:2,num:1,username:'leon'},
    ]
*/
// 通过cookie获取用户信息，并判断
let username = getCookie('username');
// 点加入购物车
$('.addBtn').click(() => {
  // 判断是否登录
  if (!username) {
    layer.msg('登录后才能加入购物车', {
      time: 1000
    });
    setTimeout(() => {
      location.href = '01-login.html';
    }, 1000);
  }
  // 获取购物数量
  let num = $('#num').val();
  // 先获取本地存储购物车的数据1
  let localData = localStorage.getItem('data');
  // 判断购物车是否为空
  if (!localData) {
    // 购物车为空
    // 直接将此次购买的商品信息写入购物车
    let obj = {
      goodsId: id,
      num: num,
      username: username
    };
    // 存入localStorage
    localStorage.setItem('data', JSON.stringify([obj]));
    layer.msg('加入购物车成功');
  } else {
    let data = JSON.parse(localData);
    // 判断之前该用户知否将这个商品加入过购物城
    let res = data.findIndex(v => v.username == username && v.goodsId == id);
    if (res != -1) { // 如果res不为-1则  这个用户之前就已经将这个商品加入购物车
      // 将这个之前就加入到购物的数据拿出来
      let cart = data.find(v => v.username == username && v.goodsId == id);
      cart.num = parseInt(cart.num) + parseInt(num); // 将需要加入购物城的商品数累加并入data数据中
      localStorage.setItem('data', JSON.stringify(data));
      setTimeout(() => {
        layer.msg('加入购物车成功')
      }, 1000);

    } else { // 这个用户之前没有将这个商品加入过购物城
      data.push({
        goodsId: id,
        num: num,
        username: username
      });
      localStorage.setItem('data', JSON.stringify(data));
      setTimeout(() => {
        layer.msg('加入购物车成功')
      }, 1000);
    }
  }
})

// 给加和减绑定点击事件
$('.add').click(function () {
  // 点击了加则将减按钮的禁用属性去除
  $(this).next().attr('disabled', false);
  // 获取input中的val，和库存值
  let val = $(this).prev().val() - 0;
  let stock = $(this).prev()[0].dataset.stock - 0;
  if (val == stock) { // 判断是否超出库存量
    $(this).prev().val(stock);
    $(this).attr('disabled', true);
    layer.msg('超出库存');
  } else {
    $(this).prev().val(++val);
  }
})

$('.reduce').click(function () {
  // 点击了减， 则将加按钮的禁用属性去除
  $(this).prev().attr('disabled', false);
  // 获取input中的val，和库存值
  let val = $(this).prev().prev().val() - 0;
  if (val == 1) { // 判断是否超出库存量
    $(this).prev().prev().val(1);
    $(this).attr('disabled', true);
    layer.msg('购买数最少为1');
  } else {
    $(this).prev().prev().val(--val);
  }
})







